<template>
  <el-form ref="ruleForm" :model="addForm" :rules="typeRules" label-width="80px">
    <el-form-item label="分类" prop="courseTypeId">
      <el-select v-model="addForm.courseTypeId" placeholder="请选择分类">
        <el-option v-for="(item,index) in tableData" :key="index" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="作者">
      <el-input v-model="addForm.author" />
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <el-input v-model="addForm.title" />
    </el-form-item>
    <!-- <el-form-item label="封面">
      <el-input v-model="addForm.cover" />
    </el-form-item> -->
    <el-form-item label="封面">
      <el-upload
        class="avatar-uploader"
        :action="action"
        :headers="myHeaders"
        :show-file-list="false"
        :on-success="(res)=>{handleAvatarSuccess(res,'cover')}"
      >
        <img v-if="addForm.cover" :src="addForm.cover" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
      <el-input v-model="addForm.cover" style="margin-top:20px;" placeholder="请输入图片地址" />
      <span class="tips">请上传图片或输入图片地址，建议尺寸：500*700px</span>
    </el-form-item>
    <el-form-item label="视频" prop="video">
      <el-upload
        class="avatar-uploader"
        :action="action"
        :headers="myHeaders"
        :show-file-list="false"
        accept=".mp4"
        :on-success="(res)=>{handleAvatarSuccess(res,'video')}"
      >
        <video v-if="addForm.video" style="height:500px;" :src="addForm.video" class="avatar" width="320" height="240" controls>
          <source src="addForm.video" type="video/mp4">
        </video>
        <i v-else class="el-icon-upload avatar-uploader-icon" />
      </el-upload>
      <el-input v-model="addForm.video" style="margin-top:20px;" placeholder="请输入视频地址" />
      <span class="tips">请上传视频或输入视频地址</span>
    </el-form-item>
    <el-form-item label="详情">
      <tinymce ref="tinymceContent" v-model="addForm.content" :height="400" />
    </el-form-item>
    <el-form-item label="是否收费">
      <el-select v-model="addForm.isCharge" placeholder="请选择是否收费">
        <el-option
          v-for="item in Charge"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="价钱">
      <el-input v-model="addForm.amount" type="number" />
    </el-form-item>
    <el-form-item label="上下架">
      <el-select v-model="addForm.isActive" placeholder="请选择上下架">
        <el-option
          v-for="item in Active"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addForm_enter('ruleForm')">保存</el-button>
      <el-button @click="close()">关闭</el-button>
    </el-form-item>
  </el-form>

</template>
<script>
import Tinymce from '@/components/Tinymce'
import { uploadUrl, token } from '@/utils/request'
import {
  subjectTypeList,
  subjectAdd,
  subjectDetail
} from '@/api/subject'
export default {
  components: { Tinymce },
  data () {
    return {
      Active: [
        {
          value: 0,
          label: '下架'
        },
        {
          value: 1,
          label: '上架'
        },

      ],
      Charge: [
        {
          value: 0,
          label: '不收费'
        },
        {
          value: 1,
          label: '收费'
        },
      ],
      action: uploadUrl,
      myHeaders: {
        'Authorization-admin': token
      },
      formInline: {
        name: '', // 搜索字段
        page: '1', // 当前页
        pageSize: '1000' // 每页记录数
      },
      tableData: [],
      addForm: {
        id: '', // id
        courseTypeId: '',
        author: '',
        title: '',
        cover: '',
        video: '',
        content: '',
        isCharge: 0,
        amount: 0,
        isActive: 0,
      },
      typeRules: {
        courseTypeId: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        video: [
          { required: true, message: '请选择视频', trigger: 'blur' }
        ]
      },
      typeState: true
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getAll(this.formInline)
  },
  // 方法集合
  methods: {
    // 图片上传回调
    handleAvatarSuccess (response, key) {
      const { url } = response.data
      this.addForm[key] = url
      this.$forceUpdate()
    },
    // 确认新增课程
    addForm_enter (ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.typeState) {
            console.log(this.addForm)
            subjectAdd(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.$router.go(-1)
              }
              // this.getAll(this.formInline)
              // this.addFormDialog = false
            })
          } else {
            subjectAdd(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$router.go(-1)
              }
              // this.getAll(this.formInline)
              // this.addFormDialog = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close () {
      this.$router.go(-1)
    },
    // 初始化查询所有数据
    async getAll (formInline) {
      const res = await subjectTypeList(formInline)
      this.tableData = res.data.list
      const id = this.$route.query.id
      if (id) {
        const detail = await subjectDetail({ id: id })
        this.addForm = detail.data
        this.typeState = false
      }
    }
  }
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 178px;
    height: auto;
    display: block;
  }
</style>
